<template>
	<picker @change="onChange" :value="index" :range="dict" range-key="label">
		<view class="picker">
			{{ displayValue }}
		</view>
	</picker>
</template>

<script setup>
	import { toRefs, ref, reactive, computed } from 'vue'
	import useDict from './useDict'
	const props = defineProps({
		dict: String | Object,
		prefix: {
			type: [String, Boolean],
			default: true,
		},
		value: String | Number,
		remove: String | Number,
	});
	
	let emits = defineEmits(["change", "update:value"])
	let searcher = ref("");
	let { value } = toRefs(props);
	let { dict } = useDict(props, searcher);
	
	let index = computed(_ => {
		return dict.value.findIndex(e => e.value === props.value)
	});
	let displayValue = computed(_ => {
		return index.value === -1 ? "请选择" : dict.value[index.value].label;
	});

	function onChange (e) {
		let i = e.detail.value;
		let v = dict.value[i].value;
		emits("update:value", v);
		emits("change", v);
	}
</script>

<style lang="less" scoped>
.cu-form-group uni-picker .picker {
	text-align: right;
}
</style>